<!--
  @Descripttion:：简历查看/预览
  @Author：yejianbo
  @Date：2022年05月22日 03:06:59
-->
<template>
  <div>
    <PageCom class="pc_view">
      <section class="resume-review">
        <!-- 个人基本信息 -->
        <section class="block">
          <div class="nav-com">
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              style="margin-bottom: 20px"
            >
              <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ name: 'userCenter' }">
                用户中心
              </el-breadcrumb-item>
              <el-breadcrumb-item>
                <span style="color: #3d6cb0">{{
                  $route.meta.title || "--"
                }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="head-icon">
            <img
              class="touxiang"
              v-if="userInfo.studentPictureUrl"
              :src="userInfo.studentPictureUrl"
              alt="用户头像"
            />
            <img
              class="touxiang"
              v-else
              src="../../assets/images/touxiang.png"
              alt="用户头像"
            />
            <el-button
              class="edit-btn"
              v-if="!hideEdit"
              @click="linkTo('resumeEdit', true)"
              >编辑</el-button
            >
          </div>
          <div class="user-info">
            <div class="row1">
              {{ userInfo.nickname }}
              <!-- <span>学生</span> -->
            </div>
            <div class="row2">
              {{ userInfo.sex }}<span class="line"></span>{{ userInfo.age
              }}<span class="line"></span>{{ userInfo.liveCity
              }}<span class="line"></span>{{ isGraduat(userInfo.identify)
              }}<span class="line"></span>{{ userInfo.clan }}
              <br />
              <div class="row3">
                <span class="label">手机号码</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="userMobile"
                  placement="top-start"
                >
                  <span class="label">{{ userMobile }}</span>
                </el-tooltip>
              </div>
              <div class="row4">
                <span class="label">邮箱地址</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="userInfo.email"
                  placement="top-start"
                >
                  <span class="label">{{ userInfo.email }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
        </section>
        <!-- 求职状态 -->
        <section class="block pt30">
          <p class="title">求职状态</p>
          <div class="job-wish-item">
            <div class="row1">
              {{
                (userInfo.jobStatus || "--") + "/" + (userInfo.inJobTime || "--")
              }}
            </div>
          </div>
        </section>
        <!-- 切换简历模块 -->
        <div class="changeRow">
          <div
            class="items"
            @click="changeIndex(index)"
            v-for="(item, index) in curriculumList"
            :key="index"
            :class="currentIndex == index ? 'active' : ''"
          >
            <span>{{ item.name || `模板${index + 1}` }}</span>
            <img
              src="../../assets/images/edit_icon.png"
              alt=""
              @click="linkTo('resumeEdit', true)"
            />
          </div>
          <div
            class="items adds"
            v-if="curriculumList.length < 5"
            @click="linkToAdd('resumeEdit')"
          >
            <i class="el-icon-plus" style="margin-right: 10px"></i>添加模板
          </div>
        </div>
        <!-- 简历组件 -->
        <div v-for="(item, index) in curriculumList" :key="index">
          <CurriculumItem :item="item" v-if="index == currentIndex" />
        </div>
      </section>
    </PageCom>
    <div class="t_view">
      <section class="resume-review">
          <!-- 个人基本信息 -->
          <section class="block">
            <div class="head-icon">
              <img
                class="touxiang"
                v-if="userInfo.studentPictureUrl"
                :src="userInfo.studentPictureUrl"
                alt="用户头像"
              />
              <img
                class="touxiang"
                v-else
                src="../../assets/images/touxiang.png"
                alt="用户头像"
              />
              <el-button
                class="edit-btn"
                v-if="!hideEdit"
                @click="linkTo('resumeEdit', true)"
                >编辑</el-button
              >
            </div>
            <div class="user-info">
              <div class="row1">
                {{ userInfo.nickname }}
                <!-- <span>学生</span> -->
              </div>
              <div class="row2">
                {{ userInfo.sex }}<span class="line"></span>{{ userInfo.age
                }}<span class="line"></span>{{ userInfo.liveCity}}<span class="line"></span>{{ isGraduat(userInfo.identify)}}<span class="line"></span>{{ userInfo.clan }}
                <br />
                <div class="row3">
                  <span class="label">手机号码</span>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="userMobile"
                    placement="top-start"
                  >
                    <span class="label">{{ userMobile }}</span>
                  </el-tooltip>
                </div>
                <div class="row4">
                  <span class="label">邮箱地址</span>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="userInfo.email"
                    placement="top-start"
                  >
                    <span class="label">{{ userInfo.email }}</span>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </section>
          <!-- 求职状态 -->
          <section class="block pt30">
            <p class="title">求职状态</p>
            <div class="job-wish-item">
              <div class="row1">
                {{
                  (userInfo.jobStatus || "--") + "/" + (userInfo.inJobTime || "--")
                }}
              </div>
            </div>
          </section>
          <!-- 切换简历模块 -->
          <div class="changeRow" v-if="!hideEdit">
            
            <div
              class="items"
              @click="changeIndex(index)"
              v-for="(item, index) in curriculumList"
              :key="index"
              :class="currentIndex == index ? 'active' : ''"
            >
              <span>{{ item.name || `模板${index + 1}` }}</span>
              <img
                src="../../assets/images/edit_icon.png"
                alt=""
                @click="linkTo('resumeEdit', true)"
              />
            </div>
            <div
              class="items adds" v-if="curriculumList.length < 5"
              @click="linkToAdd('resumeEdit')"
            >
              <i class="el-icon-plus" style="margin-right: 10px"></i>添加模板
            </div>
          </div>
          <!-- 简历组件 -->
          <div v-for="(item, index) in curriculumList" :key="index">
            <CurriculumItem :item="item" v-if="index ==   (hideEdit? TcurrentIndex : currentIndex)" />
          </div>
        </section>
    </div>
  </div>
</template>
<script>
import CurriculumItem from "./components/curriculumItem.vue";
import PageCom from "@/components/page/index.vue";
import { mapState } from "vuex";
import { getAge } from "../../utils/utils";
import { getStudentCurriculumVitaeBylogin } from "../../request/api";
import moment from "moment";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {
    hideEdit: {
      type: Boolean,
      default: () => false,
    },
     TcurrentIndex: {
        type: String|Number,
      default: () => 0,
    }
  },
  // 局部注册的组件
  components: { PageCom, CurriculumItem },
  // 组件状态值
  data() {
    return {
      currentCurriculumId: null,
      currentIndex: 0,
      userInfo: {},
      curriculumList: [],
    };
  },
  // 计算属性
  computed: {
    ...mapState(["USER_INFO", "userMobile"]),
  },
  watch: {
    USER_INFO: function (newValue) {
      newValue.birthday && (newValue.age = getAge(newValue.birthday) + "岁");
      this.userInfo = newValue;
    },
  },
  // 组件方法
  methods: {
    // 判断学生类型，应届、毕业
    isGraduat(dateNumber) {
      return new Date().getTime() > dateNumber ? "往届" : "应届";
    },
    linkToAdd() {
      this.$router.push({
        name: "resumeEdit",
        params: { index: this.curriculumList.length },
      });
    },
    linkTo(routeName, type) {
      if (type) {
        this.$router.push({
          name: routeName,
          query: { id: this.currentCurriculumId },
        });
        return;
      }
      this.$router.push({ name: routeName });
    },
    changeIndex(index) {
      if (index == this.currentIndex) return;
      this.currentIndex = index;
      this.currentCurriculumId = this.curriculumList[index].id;
    },
    init() {
      getStudentCurriculumVitaeBylogin().then((res) => {
        if (res.data && res.data != []) {
          this.currentCurriculumId = res.data[0].id;
          this.curriculumList = res.data;
        }
      });
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  mounted() {
    this.init();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.t_view{
  display: none;
}
.resume-review {
  position: relative;
  width: 100%;
  background: #f5f8fa;
  .changeRow {
    width: 100%;
    background: #f5f8fa;
    padding: 0 14px 0;
    display: flex;
    .items {
      width: 180px;
      height: 58px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 30px;
      font-size: 18px;
      margin-right: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      border-radius: 6px 6px 0px 0px;
      cursor: pointer;
      transition-duration: 0.3s;
      position: relative;
      span {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      img {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 10px;
        cursor: pointer;
        display: none;
        top: 50%;
        transform: translateY(-50%);
      }
      &:hover {
        background: #fff;
      }
      &.active {
        background: #fff;
        color: #3d6cb0;
        img {
          display: block;
        }
      }
      &.adds {
        background: transparent !important;
      }
    }
  }
  .edit-btn {
    position: absolute;
    top: 30px;
    right: 30px;
  }
  .block {
    position: relative;
    background: #fff;
    margin-bottom: 15px;
  }
  .pt30 {
    padding: 25px 15px;
  }
  .title {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 28px;
    margin: 0 0 26px;
    padding: 0;
  }

  .job-wish-item {
    .row1 {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 25px;
      margin-bottom: 18px;
    }
  }
}

.head-icon {
  position: relative;
  background: url("../../assets/images/blue_bg.png") no-repeat center center /
    cover;
  width: 100%;
  height: 170px;
  > img {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate3d(-50%, 50%, 0);
    overflow: hidden;
    margin-bottom: 10px;
  }
}

.user-info {
  position: relative;
  padding: 47px 0 30px;
  height: 214px;
  text-align: center;
  .row1 {
    position: relative;
    font-size: 25px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #37383d;
    line-height: 36px;
    margin-bottom: 6px;
    span {
      display: inline-block;
      border-radius: 6px;
      border: 1px solid #2f8efe;
      font-size: 18px;
      font-weight: 400;
      color: #2f8efe;
      line-height: 30px;
      padding: 0 12px;
      margin-left: 12px;
      vertical-align: middle;
      // &.line{
      //   position: relative;
      //   display: inline-block;
      //   width: 1px;
      //   height: 14px;
      //   background: #9597a0;
      //   margin: 0 18px;
      // }
    }
  }
  .row2 {
    position: relative;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 21px;
    .line {
      position: relative;
      display: inline-block;
      width: 1px;
      height: 10px;
      background: #9597a0;
      margin: 0 13px;
    }
  }
  .row3 {
    position: absolute;
    display: inline-block;
    left: 15px;
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383d;
    line-height: 21px;
    bottom: -41px;
    .label {
      position: relative;
      display: inline-block;
      width: 60%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .label:first-child {
      width: 40%;
    }
  }
  .row4 {
    position: absolute;
    display: inline-block;
    left: 15px;
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383d;
    line-height: 21px;
    word-break: break-all;
    bottom: -74px;
    .label {
      position: relative;
      display: inline-block;
      width: 60%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .label:first-child {
      width: 40%;
    }
  }
}
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
}

@media screen and (max-width: 480px) {
  .pc_view{
    display: none;
  }
  // .nav-com{
  //   display: none;
  // }
  .t_view{
    display: block;
    .resume-review {
      position: relative;
      width: 100%;
      background: #f5f8fa;
      .changeRow {
        width: 100%;
        background: #f5f8fa;
        padding: 0 10px 0;
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
        .items {
          width: auto;
          height: 44px;
          display: flex;
          justify-content: center;
          
          align-items: center;
          padding:  0 38px;
          font-size: 14px;
          margin-right: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          border-radius: 6px 6px 0px 0px;
          cursor: pointer;
          transition-duration: 0.3s;
          position: relative;
          span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          img {
            position: absolute;
            width: 17px;
            height: 17px;
            right: 10px;
            cursor: pointer;
            display: none;
            top: 50%;
            transform: translateY(-50%);
          }
          &:hover {
            background: #fff;
          }
          &.active {
            background: #fff;
            color: #3d6cb0;
            img {
              display: block;
            }
          }
          
        }
        .adds {
          flex: 0 0 90px;
          padding: 0;
          background: transparent !important;
        }
      }
      .edit-btn {
        display: none;
        position: absolute;
        top: 30px;
        right: 30px;
      }
      .block {
        position: relative;
        background: #fff;
        margin-bottom: 10px;
      }
      .pt30 {
        padding: 0.1rem;
      }
      .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 22px;
        margin: 0 0 16px;
        padding: 0;
      }

      .job-wish-item {
        .row1 {
          font-size: 0.14rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 0.22rem;
          margin-bottom: 0.08rem;
        }
      }
    }

    
  }
  .head-icon {
    position: relative;
    background: url("../../assets/images/blue_bg.png") no-repeat center center /
      cover;
    width: 100%;
    height: 80px;
    > img {
      display: block;
      width: 88px;
      height: 88px;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate3d(-50%, 60%, 0);
      overflow: hidden;
      margin-bottom: 10px;
    }
  }

  .user-info {
    position: relative;
    padding: 47px 0 30px;
    height: 214px;
    text-align: center;
    .row1 {
      position: relative;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 33px;
      margin-bottom: 12px;
      span {
        display: inline-block;
        border-radius: 6px;
        border: 1px solid #2f8efe;
        font-size: 18px;
        font-weight: 400;
        color: #2f8efe;
        line-height: 30px;
        padding: 0 12px;
        margin-left: 12px;
        vertical-align: middle;
        // &.line{
        //   position: relative;
        //   display: inline-block;
        //   width: 1px;
        //   height: 14px;
        //   background: #9597a0;
        //   margin: 0 18px;
        // }
      }
    }
    .row2 {
      position: relative;
      display: inline-block;
      text-align: center;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 21px;
      .line {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 10px;
        background: #9597a0;
        margin: 0 13px;
      }
    }
    .row3 {
      position: absolute;
      display: inline-block;
      left: 15px;
      width: 100%;
      text-align: left;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 20px;
      bottom: -41px;
      .label {
        position: relative;
        display: inline-block;
        width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .label:first-child {
        width: 40%;
      }
    }
    .row4 {
      position: absolute;
      display: inline-block;
      left: 15px;
      width: 100%;
      text-align: left;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 21px;
      word-break: break-all;
      bottom: -74px;
      .label {
        position: relative;
        display: inline-block;
        width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .label:first-child {
        width: 40%;
      }
    }
  }
}
</style>
